<!-- 使用 before 和 after 双伪元素清除浮动 -->
<style>
    .box1{
      width: 300px;
      background: cyan;
    }
  
    .box1>div{
      width: 70px;
      height: 100px;
      background-color: yellow;
      float: left;
    }
  
    .clearfix{
      *zoom: 1;
    }
  
    .clearfix::before,.clearfix::after{
      content: '';
      display: block;
      clear: both;
    }  
  </style>
  <body>
  <div class="box1 clearfix">
    <div></div>
    <div></div>
    <div></div>
  </div>
  </body>
  


<!-- 使用清除属性clear -->
<!-- <style>
    .contianer{
      background-color: deepskyblue;
    }
  
    .item{
      float: left;
      width: 50px;
      height: 50px;
      background-color: forestgreen;
      border: gold solid 1px;
    }
    /* 处理高度坍塌的问题 */
    .end{
       clear: both;   
    }
    </style>
  <body>
  <div class="contianer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="end"></div>
  </div>
  </body>
   -->



<!-- 使用after伪元素给父元素添加一个clearfix -->
<!-- <style>
    .contianer {
        background-color: deepskyblue;
        padding: 30px;
    }

    .item {
        width: 50px;
        height: 50px;
        background-color: forestgreen;
        border: gold solid 1px;
        float: left;
    }

    .clearfix::after {
        content: "";
        display: block;
        /*插入伪元素是行内元素，要转化为块级元素*/
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    /*  *只有IE6,7识别 */
</style> -->
<!-- 
<body>
    <div class="contianer clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body> -->


<!-- 给浮动元素的父辈容器添加高度 -->
<!-- <style>
    *{
      padding:0;
      margin: 0;
    }
  
    .box1{
      width: 1700px;
      height: 100px;
      background-color: lightseagreen;
    }
  
    .box1>div{
      float: left;
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      border: lightgreen solid 2px;
    }
  
    .box2{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
  </style>
  <body>
    <div class="box1">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="box2"></div>
  </body> -->
  